<template>
	<!-- 上传图片 -->
	<view class="goods-top">
		<view><input type="text" v-model="cover.goods_title" placeholder="请输入商品标题" placeholder-class="pl-text" /></view>
		<!-- 横幅/轮播图 -->
		<view class="goods-image">
			<!-- 添加图片图标 -->
			<view v-show="cover.sto_image.length<13" @click="uploadImg">
				<image src="../../static/detail/shuxing-img.png" mode="aspectFill"></image>
			</view>
			<!-- 展示图片 -->
			<view class="upload-Image" v-for="(item,index) in cover.sto_image" :key="index">
				<image :src="item.image" mode="aspectFill" @click="previewImg(index,item.image)"></image>
				<!-- 删除图片图标 -->
				<image @click="deleteImg(index)" src="../../static/detail/shanchu-goods.svg" mode="widthFix"></image>
			</view>
		</view>
	</view>
	<!-- 上传短视频 -->
	<view class="goods-top goods-video">
		<view class="video-title">
			<text>上传短视频(可选)</text>
			<image src="/static/detail/shanchu.svg" mode="" @click="video.sto_video=''" v-if="video.sto_video != ''"></image>
		</view>
		<view class="goods-image" v-if="video.sto_video == ''">
			<view><image src="/static/detail/shuxing-img.png" mode="aspectFill" @click="upVideo()"></image></view>
		</view>
		<video v-show="video.sto_video!=''" :src="video.sto_video" objectFit="cover"></video>
	</view>
	<!-- 所属分类 -->
	<view class="specs-view">
		<!-- 滚动选择器 -->
		<picker mode="selector" :range="sortArray" range-key="sort_name" @change="changeEnd">
			<view class="sort-title specs-title">
				<text>所属分类</text>
				<text>{{sort_value}}</text>
				<image src="/static/detail/xiangyou-jiantou.svg" mode="widthFix"></image>
			</view>
		</picker>
	</view>
	<!-- 价格库存 -->
	<view class="specs-view price-stock">
		<view>
			<text>价格</text>
			<input type="number" v-model.number="price" placeholder="请输入价格" :disabled="specs.specsData.length > 0 ? true : false" placeholder-class="I-style" cursor-spacing="50" />
			<text>元</text>
		</view>

		<view>
			<text>库存</text>
			<input type="number" placeholder="请输入库存" :disabled="specs.specsData.length > 0 ? true : false" v-model.number="stock" placeholder-class="I-style" cursor-spacing="50" />
			<text>件</text>
		</view>
	</view>
	<!-- 创建规格 -->
	<view class="specs-view" @click="toSpecs">
		<view class="specs-title" @click="toSpecs">
			<text>创建规格(可选)</text>
			<image src="/static/detail/xiangyou-jiantou.svg" mode="widthFix"></image>
		</view>
		<view class="specs-image" v-if="specs.specsData.length == 0 ">
			<image src="/static/detail/guige-img.jpg" mode="widthFix"></image>
		</view>
		<!-- 已有规格展示 -->
		<view class="Se-specs S-flex" v-if="specs.specsData.length > 0 " v-for="(item,index) in specs.specsData" :key="index">
			<view><image :src="item.image" mode="aspectFill"></image></view>
			<view class="S-top">
				<view class="S-flex S-right">
					<text v-for="(item2,index2) in item.CPData" :key="index2">{{item2.attributeValue}}</text>
				</view>
				<view class="S-flex S-right S-stock">
					<text>库存</text>
					<text>{{item.stock}}件</text>
				</view>
			</view>
			<view class="S-price">{{item.price}}</view>
		</view>
	</view>
	<!-- 详情图 -->
	<view class="specs-view">
		<view class="specs-title"><text>商品详情</text></view>
		<!-- 展示的详情图 -->
		<view class="detail-image" v-for="(item,i) in detail.sto_detail" :key="i">
			<image :src="item.image" mode="widthFix" @click="previewDetailImg(i,item.image)"></image>
			<image src="/static/detail/shanchu-goods.svg" @click="deleteDetailImg(i)" mode="widthFix"></image>
		</view>
		<!-- 添加图标 -->
		<view class="specs-image" v-show="detail.sto_detail.length<15">
			<image src="/static/detail/shpin-img.jpg" @click="previewDeta" mode="widthFix"></image>
		</view>
	</view>

	<!-- 底部新增分类按钮 -->
	<view style="height: 150rpx;"></view>
	<view class="newly-added-view back"><view class="newly-added" @click="subMit">上架售卖</view></view>
</template>

<script setup>
import {watch,reactive,toRefs,onMounted} from 'vue'
import {sku_data} from "../../Acc-config/answer.js"

// 存储商品最小的价格和商品总库存
const miniPrice_inv=({price:'',stock:''})
const {price,stock}=toRefs(miniPrice_inv)


// 存储创建规格的数据，用于渲染页面
const specs=reactive({
	specsData:[
		/* {
		title: ,//当前是第几个规格
		CPData: {//规格属性
			attributeName: "",//规格属性名称
			attributeValue: ""},//规格属性值
		price: '',//价格
		stock: '',//库存
		image: "",//商品图片
	}, */
	],
})
// 监听-公共的响应式传值中保存创建规格页面的数据变化   Vue3中组件通信的方式
watch(sku_data,(newValue,oldValue)=>{
	specs.specsData=newValue
	
	// 取规格里价格最小的作为在封面展示的价格
	const SORT=newValue
	// 数组排序，取出最小的价格
	SORT.sort((a,b)=>a.price-b.price)
	miniPrice_inv.price=SORT[0].price
	
	// 计算总库存
	let newStock=null
	newValue.forEach(item=>newStock+=item.stock)
	miniPrice_inv.stock=newStock
	
})

// 跳转到创建规格页面
function toSpecs(){
	uni.navigateTo({
		url:'/pages/specs/index?sku='+JSON.stringify(specs.specsData),
	})
}

// 存储商品标题以及横幅/轮播图
const cover=reactive(
	{
		goods_title:'',
		sto_image:[],
	}
)
// 上传横幅/轮播图
import {uploadImage,previewPicture,multi,cloud} from '@/Acc-config/media.js'
async function uploadImg(){
	const result =await uploadImage(12)
	result.forEach(item=>cover.sto_image.push({image:item.tempFilePath}))
}

// 预览上传的横幅/轮播图图片
function previewImg(image){
	let imgArr=[]
	cover.sto_image.forEach(item=>imgArr.push(item.image))
	previewPicture(image,imgArr)
}

// 删除上传的横幅/轮播图图片
function deleteImg(index){
	cover.sto_image.splice(index,1)
}

// 存储短视频
const video=reactive({sto_video:''})
// 上传短视频
async function upVideo(){
	const result= await uploadImage(1,'video')
	video.sto_video=result[0].tempFilePath
}

// 所属分类
const sortData=reactive({
	sortArray:[],
	sort_value:'',//当前选中的
	sort_id:'',//分类的id，用于提交到数据库时对选中的分类下的quantity++
})
const {sortArray,sort_value}=toRefs(sortData)
import {init} from '@/Acc-config/init.js'
onMounted(async()=>{
	let db=await init()
	const {data} =await db.database().collection('goods_sort').field({_openid:false}).get()
	sortData.sortArray=data
})
function changeEnd(e){
	// console.log(e) e.detail.value当前选中的下标
	sortData.sort_value=sortData.sortArray[e.detail.value].sort_name
	sortData.sort_id = sortData.sortArray[e.detail.value]._id
}

// 上传商品详情图
const detail=reactive({sto_detail:[]})
async function previewDeta(){
	const result =await uploadImage(15)
	result.forEach(item=>detail.sto_detail.push({image:item.tempFilePath}))
}
//删除详情图
function deleteDetailImg(index){
	detail.sto_detail.splice(index,1)
}
// 预览详情图
function previewDetailImg(image){
	let imgArr=[]
	detail.sto_detail.forEach(item=>imgArr.push(item.image))
	previewPicture(image,imgArr)
}

// 上架售卖-校验数据
function subMit(){
	switch(true){
		case cover.goods_title=="":uni.$showMsg('请填写标题')
		break;
		case cover.sto_image.length<1:uni.$showMsg('请上传图片')
		break;
		case sortData.sort_value=="":uni.$showMsg('请选择分类')
		break;
		case miniPrice_inv.price=='':uni.$showMsg('请输入价格')
		break;
		case miniPrice_inv.stock=='':uni.$showMsg('请输入库存')
		break;
		case detail.sto_detail.length<1:uni.$showMsg('请上传详情图')
		break;
		default:database()
	}
}

// 提交到数据库
async function database(){
	uni.showLoading({
		title:'正在上传中',
		mask:true,
	})
	
	// 上传横幅/轮播图
	let res_banner=await multi(cover.sto_image,'image')
	
	// 上传详情图
	let res_detail=await multi(detail.sto_detail,'image')
	// console.log(res_detail)
	
	// 上传短视频-判断存在短视频再上传
	let res_video=video.sto_video=='' ? '' : await cloud(video.sto_video)
	// console.log(res_video)
	
	/* let obj={
		_id:'该商品的唯一标示,商品id',//数据库自动生成
		goods_title:'商品标题',
		goods_banner:[{商品横幅,image:''}],
		goods_cover:'商品封面图,商品横幅的第一张图片作为封面图',
		video_url:'短视频链接',
		category:'所属分类',
		goods_price:'商品价格',
		stock:'库存',
		sku:'true or false 是否有sku规格',//商品规格
		goods_details:[{商品详情图,image:''}],
		sold:'商品已售多少',
		shelves:'商品上架与否 true or false',
		seckill:'该商品是否参与秒杀 true or false'
	} */
	
	let obj={
		// _id:'该商品的唯一标示,商品id',//数据库自动生成
		goods_title:cover.goods_title,
		goods_banner:res_banner,
		goods_cover:res_banner[0].image,
		video_url:res_video,
		category:sortData.sort_value,
		goods_price:miniPrice_inv.price,
		stock:miniPrice_inv.stock,
		sku:specs.specsData.length>0?true:false,
		goods_details:res_detail,
		sold:0,
		shelves:true,
		seckill:false
	}
	try{
		let db= await init()
		let res=await db.database().collection('goods').add({data:obj})
		// 获取商品的_id，上传商品规格
		if(specs.specsData.length>0){
			await db.database().collection('sku_data').add({data:{sku_id:res._id,sku:specs.specsData}})
		}
		// 对选择分类下的数量++
		const _=db.database().command
		await db.database().collection('goods_sort').doc(sortData.sort_id).update({data:{quantity:_.inc(1)}})
		
		uni.hideLoading()
		uni.$showMsg('上架成功','succeed')
	}catch(e){
		//TODO handle the exception
		console.log(e)
		uni.$showMsg('上架失败')
	}	
	
	
}

</script>

<style>
page {
	background-color: #f2f2f2;
}
.goods-top {
	background-color: #ffffff;
	padding: 20rpx;
}
.pl-text {
	font-weight: 100;
}
.goods-top input {
	padding: 30rpx 0;
	font-weight: bold;
}
.goods-image {
	display: flex;
	flex-wrap: wrap;
}
.goods-image view {
	width: calc(33.3% - 5rpx * 2);
	height: 200rpx;
	margin: 5rpx;
}
.goods-image image {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 7rpx;
}
.upload-Image {
	position: relative;
}
.upload-Image image:nth-child(2) {
	width: 30rpx !important;
	height: 30rpx !important;
	position: absolute;
	top: 10rpx;
	right: 10rpx;
}
/* 视频 */
.goods-video {
	margin-top: 40rpx;
	font-weight: bold;
}
.video-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}
.video-title image {
	width: 35rpx;
	height: 35rpx;
	display: block;
}
.goods-video video {
	height: 400rpx;
	width: 100%;
}
/* 所属分类 */
.sort-title text:nth-child(1) {
	flex: 1;
}
.sort-title text:nth-child(2) {
	padding-right: 20rpx;
}
/* 价格，库存 */
.price-stock view {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx;
}
.price-stock view:nth-child(1) {
	padding-bottom: 20rpx;
}
.price-stock text:nth-child(1) {
	flex: 1;
}
.price-stock input {
	padding: 0 20rpx;
	text-align: right;
}
.I-style {
	color: #a8a8a8;
	font-size: 28rpx !important;
}
/* 规格 */
.specs-view {
	background-color: #ffffff;
	margin: 40rpx 20rpx;
	border-radius: 8rpx;
}
.specs-title image {
	width: 35rpx;
	height: 35rpx;
	display: block;
}
.specs-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx;
	font-weight: bold;
}
.specs-image image {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 8rpx;
}
.specs-image {
	padding: 20rpx;
}
.detail-image {
	position: relative;
}
.detail-image image:nth-child(1) {
	width: 100%;
	height: 100%;
	display: block;
}
.detail-image image:nth-child(2) {
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	top: 5rpx;
	right: 5rpx;
}
/* 已选规格 */
.S-flex {
	display: flex;
	align-items: center;
}
.S-flex image {
	width: 100rpx;
	height: 100rpx;
	display: block;
	border-radius: 8rpx;
}
.Se-specs {
	padding: 20rpx;
	border-bottom: 1rpx solid #e6e6e6;
}
.S-top {
	flex: 1;
}
.S-top view:nth-child(1) {
	padding-bottom: 10rpx;
}
.S-right text {
	padding: 0 20rpx;
}
.S-stock {
	color: #c3c3c3;
}
.S-price {
	font-weight: bold;
}
/* 底部 */
.back {
	background-color: #fafafa !important;
	padding-top: 10rpx !important;
}
</style>
